<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/jquery/jquery-3.4.1.js"></script>
<link href="${pageContext.request.contextPath}/resource/bootstrap4/css/bootstrap.css" rel="stylesheet" >
<script src="${pageContext.request.contextPath}/resource/bootstrap-treeview/js/bootstrap-treeview.js"></script>    
    
<div class="container">
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
	  <a class="navbar-brand" href="#">分类管理</a>
	  </nav>
	<div class="row">
		<div class="col-md-5">
			<div class="container" id="tree">
				
			</div>
		</div>
		<div class="col-md-5">
			<!-- 修改数据 -->
			<form id="updateForm">
				<div class="form-group row" >
				    <label for="id" class="col-sm-2 col-form-label">主键id</label>
				    <div class="col-sm-10">
				      <input type="text" readonly="readonly" value="0" id="id" name="id">	
				    </div>
				  </div>
				  
				 
				  <div class="form-group row" >
				    <label for="name" class="col-sm-2 col-form-label">名称</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" id="name" name="name">
				    </div>
				  </div>
				  <div class="form-group row">
				    <label for="path" class="col-sm-2 col-form-label">path</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" id="path" name="path">
				    </div>
				  </div>
				  <div class="form-group row">
				    <label for="file" class="col-sm-2 col-form-label"></label>
				    <div class="col-sm-10">
				      <button class="btn btn-primary mb-2" type="button" onclick="commitUpdateData()"> 修改</button>
				       <button class="btn btn-primary mb-2" type="button" onclick="delData()"> 删除</button>
				    </div>
				  </div>
				</form>  
				<hr>
				<!-- 修改数据 -->
			<form id="addForm">
				<div class="form-group row" >
					<!-- 上一个级别的id -->
					<input type="hidden" name="parentId" id="parentId" value="0">
					<!-- 上一个级别的路径 -->
					<input type="hidden" name="parentPath" id="parentPath" value="0">
					<!-- 本级别的路径   提交之前的时候赋值 -->
					<input type="hidden" name="path" id="addpath" value="0">
				    <label for="pname" class="col-sm-2 col-form-label">上级</label>
				    <div class="col-sm-10">
				      <input type="text"  value="0" id="pname" name="pname">	
				    </div>
				  </div>
				 
				  <div class="form-group row" >
				    <label for="name" class="col-sm-2 col-form-label">名称</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" id="addname" name="name">
				    </div>
				  </div>
				
				  <div class="form-group row">
				    <label for="file" class="col-sm-2 col-form-label"></label>
				    <div class="col-sm-10">
				      <button class="btn btn-primary mb-2" type="button" onclick="commitAddData()">添加</button>
				      
				    </div>
				  </div>
				</form>  
				
		</div>
	</div>
</div>

<script type="text/javascript">

$.post("../category/treeData",function(msgResult){
	if(msgResult.code==0){
		$('#tree').treeview({data: msgResult.data,
			//增加一个点击事件 
			onNodeSelected: function(event, nodeData) {
				$("#id").val(nodeData.id)
				$("#name").val(nodeData.text)
				$("#path").val(nodeData.path)
				
				// 为新增做准备
				
				$("#pname").val(nodeData.text)
				$("#parentId").val(nodeData.id)
			    $("#parentPath").val(nodeData.path)	
			    $("#addname").val("")	
			   
			 }
			
		});
		//获取数据成功
	}else{
		//获取树形数据失败的
		alert('获取数据失败')
		
	}
})

// 提交添加的数据
function commitAddData(){
	 
    //拼装自己的路径	
	$("#addpath").val( $("#parentPath").val()+"/"+ $("#addname").val())
	 
	$.post("../category/add",$("#addForm").serialize(),function(msg){
		if(msg.code==0){
			alert("添加成功")
			// 刷新
			$("#workContent").load("../category/list")
		}else{
			alert("添加失败")
		}
	})
}

// 提交修改的数据
function commitUpdateData(){
	$.post("../category/update",$("#updateForm").serialize(),function(msg){
		if(msg.code==0){
			alert("修改成功")
			// 刷新
			$("#workContent").load("../category/list")
		}else{
			alert("修改失败")
		}
	})
}

// 删除
function delData(){
	$.post("../category/del",{id:$("#id").val()},function(msg){
		if(msg.code==0){
			//删除成功
			alert("删除成功")
			// 刷新
			$("#workContent").load("../category/list")
		}else{
			alert(msg.errInfo)
		}
	})
}


</script>